<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3.js</title>
    <!-- <script src="d3.v7.min.js"></script> -->
    <script src="jquery-3.6.4.js"></script>
    <script src="d3.v5.js"></script>
    <style>
        .chartd3{
            background: #eee;
        }
        .heavy{
            font: bold 30px sans-serf;
        }
        .bar-char{
            background: #58d8f2;
        }
        .scale-bar-chart{
            background: #70fcb6;
        }

    </style>
</head>
<body>

    <svg></svg>
   
</body>
<script>
  
  var data=[
    {"platform":"android","percent":40.11},
    {"platform":"window","percent":36.69},
    {"platform":"ios","percent":13.06},
]
var svgWidth=500,svgHeight=300,radius = Math.min(svgWidth,svgHeight)/2;
var svg = d3.select("svg")
.attr('width', svgWidth )
.attr('height', svgHeight)

var g = svg.append("g")
.attr('transform',"translate("+ radius+","+radius+")" )

var color = d3.scaleOrdinal(d3.schemeCategory10);

var pie = d3.pie().value(function(d){
    return d.percent;
})

var path =d3.arc()
.outerRadius(radius)
.innerRadius(0);

var arc = g.selectAll("arc")
.data(pie(data))
.enter()
.append(g);

arc.append("path")
 .attr('d', path )
 .attr('fill',function(d){
    return color(d.data.percent);
 
 } )


</script>

</html>